<template>
  <div class="smartSearch">
    <div class="search_icon" @click="showSearch" ref="search_icon">
      <i class="iconfont icon-zhinengjiansuo"></i>
    </div>
    <div class="search_input" ref="search_input">
      <input type="text" ref="inputText" placeholder="尝试输入您的问题或关键词…" v-model="smartSearchValue"  @keyup.enter="search" />
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
        clickFlag:false,
        smartSearchValue:""
    };
  },
  methods:{
    search(){
        this.$bus.$emit('smartSearch',this.smartSearchValue)
        this.showSearch()
        //及时清空输入框中的值
        this.smartSearchValue=""
        
    },
    showSearch(){
        this.clickFlag=!this.clickFlag
        if(this.clickFlag){
            this.$refs.search_icon.style.color="#fff";
            this.$refs.search_icon.style.background="rgb(192, 146, 95, 1)";
            this.$refs.search_input.style.transform="translateX(40px)";
            //手动给input框获取焦点
            setTimeout(()=>{
              this.$refs.inputText.focus();
            },1000)
        }
        else{
            this.$refs.search_icon.style.color="#d3d3d3";
            this.$refs.search_icon.style.background="rgb(192, 146, 95, 0.9)";
            this.$refs.search_input.style.transform="translateX(350px)";
        }

    }

  }
};
</script>

<style scoped>
.smartSearch {
  width: 350px;
  height: 45px;
  position: fixed;
  bottom: 110px;
  right: 100px;
  overflow: hidden;
}
.search_icon {
  width: 45px;
  height: 45px;
  background: rgb(192, 146, 95, 0.9);
  transition: 0.2s; /* 设置变换效果 */
  opacity: 1; /* 默认情况下，按钮透明 */
  position: fixed;
  bottom: 110px;
  right: 60px;
  text-align: center;
  line-height: 45px;
  border-radius: 50%;
  color: #d3d3d3;
  z-index:100;
}
.icon-zhinengjiansuo {
  font-size: 40px;
  cursor: pointer;
}
.search_icon:hover {
  color: #fff;
  background: rgb(192, 146, 95, 1);
}
.search_input{
    width:300px;
    height:40px;
    line-height: 40px;
    transform: translateX(350px);
    transition:all .6s ;
}
.search_input input{
    background: #FFFFFF;
    width:300px;
    height:35px;
    line-height: 35px;
    border-radius: 10px;
    border:1px solid #d5d3d3;
    font-size: 15px;
    color: #a47035;
    padding:5px;
}
input::placeholder {
color: #a47035; /* 修改颜色 */
}
.search_input input:focus {
outline: 1px solid rgb(192, 146, 95, 0.9);; /* 设置轮廓样式 */
border-radius: 10px; /* 设置圆角 */
/* box-shadow: 1px 1px 10px 1px rgb(192, 146, 95, 0.9);  */
}
</style>